{include file="common/header"/}
<style type="text/css">
    /*{设置table每一行的height #}*/
    tbody .layui-table-cell {
        overflow: visible;
        height: auto;
        vertical-align: middle;
    }
    .child-row {
        background: #f8f8f8;
    }
    .son {
        height: 20px;
    }
</style>
<div class="lemo-container">
    <div class="lemo-main">
        <div class="admin-main layui-anim layui-anim-upbit">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>客户报价表</legend>
                <blockquote class="layui-elem-quote">
                    <div class="layui-inline">
                        <input type="hidden" id="id" value="{$id}">
                        <input type="text" id='keys' name="keys" lay-verify="required" placeholder="{:lang('pleaseEnter')}" autocomplete="off" class="layui-input">
                    </div>
                    <a href="javascript:;" class="layui-btn data-add-btn layui-btn-sm" lay-submit="" lay-filter="search" id="search">{:lang('search')}</a>
                    <a data-href='{:url("addCustomer")}' href="javascript:;" class="layui-btn layui-btn-sm layui-btn-warm addid">{:lang('add')}</a>
                </blockquote>
            </fieldset>
            <table class="layui-table" id="list" lay-filter="list"></table>
        </div>
    </div>
</div>

<script type="text/html" id="action">
    <a  class="layui-btn layui-btn-danger layui-btn-xs" data-href="{:url('delete')}?id={{d.id}}" lay-event="del">{:lang('del')}</a>
</script>
<script type="text/html" id="status">
    {{# if(d.status ==1) {}}
        已审核
    {{# } else if (d.status ==2) {}}
        驳回
    {{# } else {}}
    未审核
    {{# }}}
</script>

<script type="text/html" id="imgurl0">
    <img class="layui-upload-img" id="addPic" src="{{d.physical_pic}}" width="80px" height="80px">
</script>

<script type="text/html" id="imgurl1">
    <img class="layui-upload-img" id="addPic" src="{{d.specifications_pic}}" width="80px" height="80px">
</script>

<script type="text/html" id="imgurl2">
    <img class="layui-upload-img" id="addPic" src="{{d.quotation_pic}}" width="80px" height="80px">
</script>

{include file="common/footer"/}
<script>
    var tableIn=null;
    layui.config({
        base: "/static/admin/js/",
        version: true
    }).extend({
        Admin: 'Admin'
    }).use(['form', 'table','Admin'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        tableIn = table.render({
            elem: '#list',
            url: '{:url("customer")}',
            method: 'post',
            where: {
                id: $('#id').val(),
            },
            cols: [[
                {field: 'id', title: 'ID', width: 80},
                {field: 'physical_pic', title: '实物图', width: 100, toolbar: '#imgurl0'},
                {field: 'product_name', title: '商品名称', width: 120},
                {field: 'specifications_pic', title: '商品规格图', width: 100, toolbar: '#imgurl1'},
                {field: 'attribute', title: '商品属性', width: 120},
                {field: 'quotation_pic', title: '报价截图', width: 100, toolbar: '#imgurl2'},
                {field: 'purchasing_cost', title: '拿货成本', width: 120},
                {field: 'consumables', title: '耗材', width: 120},
                {field: 'artificial', title: '人工', width: 120},
                {field: 'cargo_damage', title: '货损', width: 160},
                {title: '共计', width: 120, templet: function(d) {
                    return Number(d.purchasing_cost)
                }},
                {field: 'create_time', title: '创建时间', width: 170},
                {title: '操作', width: 120, toolbar: '#action', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            done: function(res) {  
                var $tbody = $(this.elem).next('.layui-table-view').find('.layui-table-body tbody');
                var data = res.data;  

                // 清空原有行
                $tbody.empty();

                // 遍历主数据，插入主行+子行
                data.forEach((mainRow, mainIndex) => {
                    // 计算主行需要合并的行数（如果有sku数据）
                    var rowSpan = mainRow.sku ? mainRow.sku.length : 1;

                    // 构建主行
                    var mainTr = `
                        <tr data-index="${mainIndex}">
                            <td rowspan="${rowSpan}" data-field="id" data-key="1-0-0" class="">
                                <div class="layui-table-cell laytable-cell-1-0-0">${mainRow.id}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="physical_pic" data-key="1-0-1" class="">
                                <div class="layui-table-cell laytable-cell-1-0-1">
                                    <img class="layui-upload-img" src="${mainRow.physical_pic}" width="80px" height="80px">
                                </div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="product_name" data-key="1-0-2" class="">
                                <div class="layui-table-cell laytable-cell-1-0-2">${mainRow.product_name}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="specifications_pic" data-key="1-0-3" class="">
                                <div class="layui-table-cell laytable-cell-1-0-3">
                                    <img class="layui-upload-img" src="${mainRow.specifications_pic}" width="80px" height="80px">
                                </div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="attribute" data-key="1-0-4" class="">
                                <div class="layui-table-cell laytable-cell-1-0-4">${mainRow.attribute}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="quotation_pic" data-key="1-0-5" class="">
                                <div class="layui-table-cell laytable-cell-1-0-5">
                                    <img class="layui-upload-img" src="${mainRow.quotation_pic}" width="80px" height="80px">
                                </div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="purchasing_cost" data-key="1-0-6" class="">
                                <div class="layui-table-cell laytable-cell-1-0-6">${mainRow.purchasing_cost}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="consumables" data-key="1-0-7" class="">
                                <div class="layui-table-cell laytable-cell-1-0-7">${mainRow.consumables}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="artificial" data-key="1-0-8" class="">
                                <div class="layui-table-cell laytable-cell-1-0-8">${mainRow.artificial}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="cargo_damage" data-key="1-0-9" class="">
                                <div class="layui-table-cell laytable-cell-1-0-9">${mainRow.cargo_damage}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="total" data-key="1-0-10" class="">
                                <div class="layui-table-cell laytable-cell-1-0-10">${Number(mainRow.purchasing_cost)}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="create_time" data-key="1-0-11" class="">
                                <div class="layui-table-cell laytable-cell-1-0-11">${mainRow.create_time}</div>
                            </td>
                            <td rowspan="${rowSpan}" data-field="action" data-key="1-0-12" align="center" class="layui-table-col-special">
                                <div class="layui-table-cell laytable-cell-1-0-12">
                                    <a class="layui-btn layui-btn-danger layui-btn-xs" data-href="{:url('delete')}?id=${mainRow.id}" lay-event="del">删除</a>
                                </div>
                            </td>
                        </tr>
                    `;
                    $tbody.append(mainTr);

                    // 如果有sku数据，添加子行
                    if (mainRow.sku && mainRow.sku.length > 0) {
                        mainRow.sku.forEach((sku, skuIndex) => {
                            var childTr = `
                                <tr class="child-row">
                                    <td>${sku.num || ''}</td>
                                    <td>${sku.unit || ''}</td>
                                    <td>${sku.price || ''}</td>
                                </tr>
                            `;
                            $tbody.append(childTr);
                        });
                    }
                });

                // 处理调价历史提示
                $('.name-cell').each(function() {
                    var $this = $(this);
                    var content = $this.data('price');
                    var length = $this.data('length');
                    if (content) {
                        $this.on('mouseover', function() {
                            var px = Number(length) * 23 + 10;
                            layer.tips(content, this, {
                                tips: [1, '#3595CC'],
                                time: 0,
                                area: ['240px', `${px}px`]
                            });
                        }).on('mouseout', function() {
                            layer.closeAll('tips');
                        });
                    }
                });
            }
        });

        // 搜索逻辑
        $('#search').click(function() {
            table.reload('list', {
                page: { curr: 1 },
                where: { 
                    keys: $('#keys').val(),
                    id: $('#id').val()
                }
            });
        });
    });
</script>